#user-pic{
    max-height: 300px;
    overflow: hidden;
}

#user-pic img{
    width: 300px;
}

.card {
    z-index: 502;
}

#detail-card{
    width: 400px;
    margin-left: -10px;
    padding-left: 10px;
    z-index: 500;
}

#change-settings{
    text-align: right;
}

a.header{
    height: 27px;
    overflow: hidden;
    color: black;
}

.header span{
    font-size: 14px;
}

#usercard {
    position: relative;
    left: 50%;
    transform: translateX(-28%);
}

#change-.header{
    height: 27px;
    padding-bottom: 2px;
    margin-bottom: 2px;
}

#change:before,
#change:after{
    content: "";/*单引号双引号都可以，但必须是英文*/
    width: 0;
    height: 3px; /*下划线高度*/
    background: #4DBB89; /*下划线颜色*/
    position: absolute;
    top: 90%;
    left: 50%;
    transition: all .8s ; /*css动画效果，0.8秒完成*/
}

#change:hover:before{/*动画效果是从中间向左延伸至50%的宽度*/
  left:0%;
  width:50%;
}
#change:hover:after{/*动画效果是从中间向右延伸至50%的宽度*/
  left: 50%; /*这句多余，主要是为了对照*/
  width: 50%;
}